<template>
	<div>
		<el-breadcrumb separator-class="el-icon-arrow-right" class="title">
			<span class="title-main">当前位置：</span>
			<el-breadcrumb-item :to="{ path: '/menu' }" class="title-other">菜单库</el-breadcrumb-item>
			<el-breadcrumb-item style="color: red !important;">菜单详情</el-breadcrumb-item>
		</el-breadcrumb>
		<div class="picture-pool">
			<div class="main">
				<p class="main-title">菜单详情</p>
				<hr class="main-hr">
				<p class="main-subtitle">Menu Details</p>
				<div class="picture-wrapper">
					<div class="picture-item-wrapper">
						<div class="picture"><img class="item-pic" :src="datalist.imgsrc" alt=""></div>
						<div class="txt">菜单名称：{{datalist.name}}</div>
						<div class="txt txta">子菜单数：{{datalist.submenus.length}}</div>

						<div class="picture-item-wrapper wrapper-add" v-for="(item, index) in datalist.submenus" :key="index">
							<div class="sub-menu">
								子菜单{{index+1}}
							</div>
							<div class="picture" style="width: 35px;height: 35px;margin: 15px 35px;"><img class="item-pic pic-add" :src="item.icon" alt=""></div>
							<div class="sub-title">菜单名称：{{item.name}}</div>
							<div class="main-txt main-txt-add">链接名称：</div>
							<div class="main-txt">链接地址：{{item.uri}}</div>
							<div class="main-txt">链接分类：</div>
							<div class="main-txt">协议方式：</div>
						</div>
					</div>
				</div>
			</div>
			<hr class="hrr">
			<div class="txt1">备注：此处是选填，该菜单为备选</div>
			<div class="back">
				<el-button class="back-button" v-on:click="goBack()">返回</el-button>
			</div>
		</div>
	</div>
</template>

<script>
	import { getPic, getAddPic } from '@/api/picPool'
	export default {
		name: 'menuDetail1',
		data() {
			return {
				datalist: {
					imgsrc: './static/img/shzats.png',
					txt: "示例数据",
					num: 3,
					child: [{
						childimg: './static/img/shzats.png',
						menuname: "社会治安态势",
						srcname: "AAAAAAA",
						adress: 'http://172.168.0.1',
						type: '平台链接',
						httptype: "http"
					}, {
						childimg: './static/img/shzats.png',
						menuname: "社会治安态势",
						srcname: "AAAAAAA",
						adress: 'http://172.168.0.1',
						type: '平台链接',
						httptype: "http"
					}, {
						childimg: './static/img/shzats.png',
						menuname: "社会治安态势",
						srcname: "AAAAAAA",
						adress: 'http://172.168.0.1',
						type: '平台链接',
						httptype: "http"
					}]
				}

			}
		},
		methods: {
			goBack: function() {
				this.$router.push('../programLib/add');
			}
		},
		created() {
			console.log(this.$route.params);
			var params = this.$route.params.detail;
			this.datalist = params;
		}
	}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
	.picture-wrapper::-webkit-scrollbar {
		display: none;
	}
	
	.title {
		margin: 0;
		padding: 0;
		margin-bottom: 14px;
		font-weight: 600;
		font-size: 16px;
		.title-main {
			position: relative;
			margin-left: -220px;
		}
		.title-other {
			margin-left: 80px;
		}
	}
	
	.picture-pool {
		position: relative;
		width: 1548px;
		height: 948px;
		background-color: #fff;
		.main {
			width: 50%;
			margin-left: 25%;
			height: calc(100% - 260px);
			.main-title {
				text-align: center;
				text-align: center;
				padding: 0;
				margin: 0;
				padding-top: 20px;
				font-size: 20px;
				font-weight: 600;
				font-family: SimHei;
			}
			.main-hr {
				height: 2px;
				margin: 0;
				padding: 0;
				margin-top: 2px;
				width: 120px;
				background-color: #d3d3d3;
				border: 0;
				margin-left: calc(50% - 60px);
			}
			.main-subtitle {
				text-align: center;
				color: #d3d3d3;
				margin: 0;
				padding: 0;
				font-size: 8px;
				margin-top: 5px;
				letter-spacing: 1px;
			}
		}
		.hrr {
			background-color: #e3e3e3;
			border: 0;
			height: 2px;
			width: 70%;
			margin-top: 15px;
			margin-left: 15%;
		}
		.txt1 {
			width: 50%;
			margin-left: 25%;
			margin-top: 20px;
			color: #29313e;
		}
		.back {
			position: absolute;
			bottom: 20px;
			left: calc(50% - 50px);
		}
		.back-button {
			letter-spacing: 10px;
			width: 100px;
		}
		.picture-wrapper {
			width: 100%;
			max-width: 1548px;
			overflow-y: auto;
			height: calc(100% - 62.5px);
			overflow-x: hidden;
			.wrapper-add {
				width: calc(100% - 2px);
				background-color: #f3f4f9;
				border: 1px solid #e3e3e3;
				;
				height: 235px;
				.sub-menu {
					background-color: #f3f4f9;
					border: 1px solid #e3e3e3;
					padding: 6px;
				}
			}
			.picture-item-wrapper {
				width: 100%;
				margin-top: 15px;
				.main-txt {
					margin-left: 35px;
					margin-top: 10px;
					margin-bottom: 10px;
					font-size: 13px;
					color: #29313e;
				}
				.sub-title {
					position: relative;
					left: 78px;
					top: -45px;
					font-size: 15px;
					font-weight: 600;
				}
				.main-txt-add {
					margin-top: -18px;
				}
				.picture {
					position: relative;
					width: 100px;
					height: 100px;
					display: flex;
					justify-content: center;
					overflow: hidden;
					user-select: none;
					background-color: #29333d;
					.item-pic {
						position: absolute;
						max-width: 100px;
						max-height: 100px;
						margin: auto;
						margin-left: -120px;
						top: 0;
						bottom: 0;
						border-right: 0 solid transparent;
						filter: drop-shadow(120px 0 #93c4ff);
					}
					.pic-add {
						width: 20px;
						height: 20px;
					}
				}
				.txt {
					top: -80px;
					left: 120px;
					position: relative;
					line-height: 18px;
					font-size: 16px;
					color: #29313e;
					letter-spacing: 1px;
				}
				.txta {
					margin-top: 45px;
					margin-bottom: -70px;
				}
			}
		}
	}
</style>